<script setup lang="ts">
/**
 * ---------------题外话-----------
 * // 不出意外使用vscode HelloWorld 会爆红 'HelloWorld' is declared but its value is never read.Vetur(6133)
  // 我们取消 Vetur 代码检查工具，使用 volar
  // 具体设置方法 https://juejin.cn/post/6966106927990308872
 */
// 删除默认生成的temple 和 style

import { useRouter } from 'vue-router';
import {staticRoutes} from '@/router/route'
import { ref } from '@vue/reactivity';
const router = useRouter();
const routes = ref(staticRoutes);
const go = (path:string) =>{
  router.push({
    path: path
  })
}
</script>

<template>
  <h1>yf开课了，哈哈哈</h1>
  <n-divider dashed>页面渲染</n-divider>
  <!-- 创建 router-view  -->
  <!-- router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view -->
  <div style="min-height:400px">
      <!-- keep-alive 是缓存组件，在示例keepalive会用到，默认会全部缓存 -->
      <router-view v-slot="{ Component }">
        <keep-alive include="keepalive">
            <component class="view" :is="Component" />
        </keep-alive>
      </router-view>
  </div>
  <!-- 移步 views/index -->
  <n-divider dashed></n-divider>
  <n-divider dashed>跳转按钮</n-divider>
  <n-space>
    <n-button type="tertiary" @click="go('/')">
      初始页面
    </n-button>
    <n-button type="tertiary" @click="go('/model')">
      双向绑定
    </n-button>
    <n-button type="primary">
      Primary
    </n-button>
    <n-button type="info">
      Info
    </n-button>
    <n-button type="success">
      Success
    </n-button>
    <n-button type="warning">
      Warning
    </n-button>
    <n-button type="error">
      Error
    </n-button>
  </n-space>
  <n-divider dashed>根据路由表生成路由按钮</n-divider>
  <n-space>
    <n-button v-for="(item) in routes" :key="item.path" type="primary" @click="go(item.path)">
      {{item.meta?.title}}
    </n-button>
  </n-space>
</template>

<style>
body{
  padding: 10px;
}
</style>